<template>
	<scroll-view class="page" scroll-y="true" @scrolltolower="loadDataFn">
		
		<view class="search-bar">
			<view class="btn" @click.stop="openCity">
				{{ searchInfo.city || "全国" }}
				<text class="xzfx_icon_location"></text>
			</view>
			<input v-model="searchInfo.keyword" type="text" placeholder="请输入关键字" confirm-type="search" @confirm="doSearch">
		</view>
		
		<view class="page-nav">
			<view class="btn" @click.stop="openSpecs('orderBy')">
				{{ searchInfo.orderBy || "智能排序" }}
				<text class="xzfx_icon_arrow_down"></text>
			</view>
			<view class="btn" @click.stop="openSpecs('truckType')">
				{{ searchInfo.truckType || "车型" }}
				<text class="xzfx_icon_arrow_down"></text>
			</view>
			<view class="btn" @click.stop="openSpecs('truckBrand')">
				{{ searchInfo.truckBrand || "品牌" }}
				<text class="xzfx_icon_arrow_down"></text>
			</view>
			<view class="btn" @click.stop="openSpecs('more')">
				更多
				<text class="xzfx_icon_sieve"></text>
			</view>
		</view>
		
		<xzfx-empty v-if="list.length === 0" tips="暂无车辆" />
		<xzfx-car-list :list="list" />
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
		
		<xzfx-popup ref="popup" v-if="show" @submit="submitSearch" @close="show = false" title="筛选条件">
			<picker-view v-if="type !== 'more' && show" class="picker-view" indicator-style="height: 50px;" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<view v-if="type === 'more' && show" class="xzfx-specs">
				<view class="specs-block">
					<view class="specs-block-title">车型</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.truckType === ''}" @click.stop="selectSpecs('truckType')">
							全部
						</view>
						<view :class="{selected: specsInfo.truckType === item}" v-for="(item,index) in $dict('truckType')" :key="index" @click.stop="selectSpecs('truckType', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">车辆品牌</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.truckBrand === ''}" @click.stop="selectSpecs('truckBrand')">
							全部
						</view>
						<view :class="{selected: specsInfo.truckBrand === item}" v-for="(item,index) in $dict('truckBrand')" :key="index" @click.stop="selectSpecs('truckBrand', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">发动机品牌</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.engineBrand === ''}" @click.stop="selectSpecs('engineBrand')">
							全部
						</view>
						<view :class="{selected: specsInfo.engineBrand === item}" v-for="(item,index) in $dict('engineBrand')" :key="index" @click.stop="selectSpecs('engineBrand', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">排放标准</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.emissionStandard === ''}" @click.stop="selectSpecs('emissionStandard')">
							全部
						</view>
						<view :class="{selected: specsInfo.emissionStandard === item}" v-for="(item,index) in $dict('emissionStandard')" :key="index" @click.stop="selectSpecs('emissionStandard', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">燃料类型</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.fuelType === ''}" @click.stop="selectSpecs('fuelType')">
							全部
						</view>
						<view :class="{selected: specsInfo.fuelType === item}" v-for="(item,index) in $dict('fuelType')" :key="index" @click.stop="selectSpecs('fuelType', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">驱动形式</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.driveType === ''}" @click.stop="selectSpecs('driveType')">
							全部
						</view>
						<view :class="{selected: specsInfo.driveType === item}" v-for="(item,index) in $dict('driveType')" :key="index" @click.stop="selectSpecs('driveType', item)">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</xzfx-popup>
		
	</scroll-view>
</template>

<script>
	const citySelector = requirePlugin('citySelector');
	export default {
		data() {
			return {
				show: false,
				type: '',
				value: [],
				range: [],
				total: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				dividerTitle: "暂无更多",
				searchInfo: {
					city: "",
					orderBy: "",
					keyword: "",
					truckType: "",
					truckBrand: "",
					emissionStandard: "",
					driveType: "",
					fuelType: "",
					engineBrand: ""
				},
				specsInfo: {
					orderBy: "",
					truckType: "",
					truckBrand: "",
					emissionStandard: "",
					driveType: "",
					fuelType: "",
					engineBrand: ""
				}
			};
		},
		onUnload () {
			if(citySelector){
				citySelector.setLocation(null);
			}
		},
		onShow() {
			const selectedCity = citySelector.getCity();
			if(selectedCity){
				this.searchInfo.city = selectedCity.name;
			}
			this.doSearch()
		},
		onPullDownRefresh(){
			this.doSearch()
		},
		methods: {
			openCity(){
				const key = 'XKEBZ-XT6AM-UMS6B-6VEJQ-INKE6-UYFAH'; // 使用在腾讯位置服务申请的key
				const referer = '百川海融小程序'; // 调用插件的app的名称
				const hotCitys = '北京、上海、天津、重庆、广州、深圳、成都、杭州'; // 用户自定义的的热门城市
				wx.navigateTo({
					url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}&show=true`,
				})
			},
			openSpecs(type){
				this.type = type;
				this.range = [];
				this.value = [0];
				if(type === "orderBy"){
					this.range = ["全部", "价格最低", "里程最少", "车龄最短", "价格最高", "最新上架"];
				}else if(type === "truckType"){
					this.range = this.$dict('truckType');
					this.range.unshift("全部");
				}else if(type === "truckBrand"){
					this.range = this.$dict('truckBrand');
					this.range.unshift("全部");
				}
				if(type !== "more"){
					for (let i = 0; i < this.range.length; i++) {
						if(this.range[i] === this.searchInfo[type]){
							this.value = [i];
						}
					}
				}
				this.specsInfo = JSON.parse(JSON.stringify(this.searchInfo))
				this.show = true
			},
			bindChange(e){
				this.value = [e.detail.value[0]];
			},
			selectSpecs(key, val){
				if(!val || this.specsInfo[key] === val){
					this.specsInfo[key] = "";
				}else{
					this.specsInfo[key] = val
				}
			},
			submitSearch(){
				this.searchInfo = JSON.parse(JSON.stringify(this.specsInfo));
				if(this.type !== "more"){
					if(this.value[0] === 0){
						this.searchInfo[this.type] = ""
					}else{
						this.searchInfo[this.type] = this.range[this.value[0]];
					}
				}
				this.$refs.popup.closeFn();
				this.pageNo = 1;
				this.pageSize = 10;
				this.total = 0;
				this.list = [];
				this.getDataFn()
			},
			loadDataFn(){
				if(this.total > this.list.length){
					this.pageNo = this.pageNo + 1
					this.getDataFn()
				}else{
					this.dividerTitle = "暂无更多"
				}
			},
			doSearch(){
				this.pageNo = 1;
				this.pageSize = 10;
				this.total = 0;
				this.list = [];
				this.getDataFn()
			},
			getDataFn(){
				this.dividerTitle = "加载中......"
				this.$apis.carSale.getList(this.searchInfo, Object.assign({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orderBy: this.searchInfo.orderBy ? (["价格最低", "里程最少", "车龄最短", "价格最高", "最新上架"].indexOf(this.searchInfo.orderBy) + 1) : ""
				})).then(res => {
					this.dividerTitle = "暂无更多"
					this.total = res.total
					this.list = this.list.concat(res.items)
				}).catch(err => {
					console.log(err)
					this.dividerTitle = "暂无更多";
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		// background-color: #fff;
		min-height: 100vh;
		.search-bar{
			margin: $xzfx-spacing;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 46rpx;
			.btn{
				// min-width: 220rpx;
				height: 60rpx;
				display: inline-flex;
				align-items: center;
				color: #666666;
				font-size: 32rpx;
				padding: 0 30rpx;
				text{
					color: #666666;
					margin-left: 8rpx;
					font-size: 28rpx;
				}
			}
			input{
				width: auto;
				// width: calc(100% - 220rpx);
			}
		}
		.page-nav{
			margin: $xzfx-spacing;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				position: relative;
				display: inline-block;
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
				.panel-sub-name{
					font-size: 26rpx;
					font-weight: 500;
					margin-left: 10rpx;
					color: #999999;
				}
			}
			.title::after{
				position: absolute;
				bottom: 0;
				left: 0;
				content: "";
				width: 100%;
				height: 8rpx;
				border-radius: 8rpx;
				background: linear-gradient(90deg, #EA4070 0%, rgba(234,64,112,0.46) 100%);
			}
			.btn{
				height: 60rpx;
				display: inline-flex;
				align-items: center;
				background-color: #fff;
				border-radius: 30rpx;
				color: #666666;
				font-size: 26rpx;
				padding: 0 30rpx;
				text{
					color: #999999;
					margin-left: 8rpx;
					font-size: 20rpx;
				}
			}
		}
		::v-deep .xzfx-car-list{
			.xzfx-car-item{
				margin: $xzfx-spacing;
			}
			.xzfx-car-item:first-child{
				margin-top: 0;
			}
		}
		.xzfx-specs{
			padding: 0 30rpx 40rpx 30rpx;
			.specs-block{
				.specs-block-title{
					font-size: 32rpx;
					font-weight: bold;
					line-height: 100rpx;
					color: #333333;
				}
				.specs-block-list{
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap: $xzfx-spacing;
					view{
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						border-radius: 30rpx;
						color: #505050;
						border: 1rpx solid #f1f4fa;
						background-color: #f1f4fa;
					}
					.selected{
						color: $xzfx-theme;
						border: 1rpx solid $xzfx-theme;
						background-color: rgba(245, 109, 157, 0.1);
					}
				}
			}
		}
		.picker-view {
			width: 100%;
			height: 500rpx;
			margin-top: 20rpx;
			.item {
				height: 50px !important;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
</style>
